<template>
	<view class="template-partner tn-safe-area-inset-bottom">
    
    <!-- 顶部自定义导航 -->
    <tn-nav-bar :isBack="false" :bottomShadow="false" backgroundColor="#FFFFFF00">
      <view class="custom-nav tn-flex tn-flex-col-center tn-flex-row-left">
        <view class="custom-nav__back" @tap.stop="openPopupModal">
          <view class="tn-icon-add-circle"></view>
        </view>
        <view class="" style="width: 52vw;overflow: hidden;margin-top: 36rpx;">
          <tn-tabs :list="scrollList" :current="current" @change="tabChange" activeColor="#000" :bold="true" :fontSize="36"></tn-tabs>
        </view>
      </view>
    </tn-nav-bar>
    
    <view class="partner-fixed" :style="{paddingTop: vuex_custom_bar_height + 10 + 'px'}">
      
      <!-- 数据信息 -->
      <view class="tn-info__container tn-flex tn-flex-wrap tn-flex-col-center tn-flex-row-between tn-margin-left tn-margin-right tn-margin-top tn-margin-bottom-sm">
        <view class="tn-info__item tn-flex tn-flex-direction-row tn-flex-col-center tn-flex-row-between" style="background-color: #F4F5F9;" @click="tn('/partnerPages/group')">
          <view class="tn-info__item__left tn-flex tn-flex-direction-row tn-flex-col-center tn-flex-row-left">
            <!-- <view class="tn-info__item__left--icon tn-flex tn-flex-col-center tn-flex-row-center" :class="[`tn-bg-${item.color}--light tn-color-${item.color}`]">
              <view :class="[`tn-icon-${item.icon}`]"></view>
            </view> -->
            <view class="tn-info__item__left__content">
              <view class="tn-info__item__left__content--title tn-text-bold tn-text-lg">我的群聊</view>
              <view class="tn-info__item__left__content--data tn-padding-top-xs tn-color-gray">62 个群聊</view>
            </view>
          </view>
          <view class="tn-info__item__right">
            <view class="tn-info__item__right--icon tn-bg-blue--disabled">
              <view class="tn-icon-team tn-color-white"></view>
            </view>
          </view>
        </view>
        <view class="tn-info__item tn-flex tn-flex-direction-row tn-flex-col-center tn-flex-row-between" style="background-color: #F4F5F9;" @click="tn('/partnerPages/apply')">
          <view class="tn-info__item__left tn-flex tn-flex-direction-row tn-flex-col-center tn-flex-row-left">
            <!-- <view class="tn-info__item__left--icon tn-flex tn-flex-col-center tn-flex-row-center" :class="[`tn-bg-${item.color}--light tn-color-${item.color}`]">
              <view :class="[`tn-icon-${item.icon}`]"></view>
            </view> -->
            <view class="tn-info__item__left__content">
              <view class="tn-info__item__left__content--title tn-text-bold tn-text-lg">好友申请</view>
              <view class="tn-info__item__left__content--data tn-padding-top-xs tn-color-gray">2 人待通过</view>
            </view>
          </view>
          <view class="tn-info__item__right">
            <view class="tn-info__item__right--icon tn-bg-indigo--disabled">
              <view class="tn-icon-my-add tn-color-white"></view>
            </view>
          </view>
        </view>  
      </view>
    </view>
    
    <view class="tn-margin-top-sm" :style="{paddingTop: vuex_custom_bar_height + 100 +'px'}">
      
      <view class="" v-if="current==0">
        <tn-index-list
          :scrollTop="scrollTop"
          :indexList="indexList"
          :custom-bar-height="vuex_custom_bar_height"
          :custom-page-scroll="true"
          :sticky="false"
          :key-list-offset-top="54"
          @select="indexListKeysSelect"
        >
          <view v-for="(item, index) in list" :key="index">
            <tn-index-anchor :index="item.letter"></tn-index-anchor>
            <view v-for="(data_item,data_index) in item.data" :key="data_index" class="">
              <view class="tn-flex tn-flex-col-center" style="margin: 50rpx 30rpx;" @click="tn('/partnerPages/user')">
                <view class="">
                  <view class="logo-pic">
                    <view class="logo-image" style="background-image:url('https://resource.tuniaokj.com/images/simple/image2.jpg');width: 90rpx;height: 90rpx;background-size: cover;">
                    </view>
                  </view>
                </view>
                <view class="tn-padding-left-sm" style="width: 100%;">
                  <view class="tn-flex tn-flex-row-between tn-flex-col-between">
                    <view class="justify-content-item">
                      <text class="oa-black tn-text-xl">{{ data_item.name }}</text>
                    </view>
                    
                  </view>
                  <view class="tn-padding-top-xs tn-text-ellipsis">
                    <text class="tn-color-gray">{{ data_item.branch }}</text>
                  </view>
                </view>
                <!-- <view class="">
                  <text class="tn-color-gray tn-text-lg tn-icon-right"></text>
                </view> -->
              </view>
              
            </view>
          </view>
        </tn-index-list>
        
        
        <view class="tn-flex tn-flex-col-center" style="margin: 50rpx 30rpx;" v-for="(item,index) in 4" :key="index" @click="tn('/partnerPages/user')">
          <view class="">
            <view class="icon15__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-bg-blue tn-color-white">
              <view class="tn-icon-my-simple-fill"></view>
            </view>
          </view>
          <view class="tn-padding-left-sm" style="width: 100%;">
            <view class="tn-flex tn-flex-row-between tn-flex-col-between">
              <view class="justify-content-item">
                <text class="oa-black tn-text-xl">蔡东东</text>
              </view>
              
            </view>
            <view class="tn-padding-top-xs tn-text-ellipsis">
              <text class="tn-color-gray">图鸟研发部</text>
            </view>
          </view>
          <!-- <view class="">
            <text class="tn-color-gray tn-text-lg tn-icon-right"></text>
          </view> -->
        </view>
        
      </view>
      
      <view class="" v-if="current==1">
        <view class="tn-flex tn-flex-col-center" style="margin: 50rpx 0rpx 50rpx 30rpx;" v-for="(item,index) in 12" :key="index">
          <view class="">
            <view class="icon15__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-bg-blue--light tn-color-blue">
              <view class="tn-icon-organizatio-fill"></view>
            </view>
          </view>
          <view class="tn-padding-left-sm" style="width: 67vw">
            <view class="tn-flex tn-flex-row-between tn-flex-col-between">
              <view class="justify-content-item">
                <text class="oa-black tn-text-xl">图鸟研发部</text>
              </view>
              
            </view>
            <!-- <view class="tn-padding-top-xs tn-text-ellipsis">
              <text class="tn-color-gray tn-text-sm">6人</text>
            </view> -->
          </view>
          <view class="" style="width: 15vw;">
            <text class="tn-color-gray tn-padding-right-xs">12人</text>
            <text class="tn-color-gray tn-text-lg tn-icon-right"></text>
          </view>
        </view>
      </view>
      
    </view>
    
    <!-- 气泡弹框 -->
    <!-- popup会有延迟，采用这种方式来优化弹窗的优化体验-->
    <popup-modal v-model="showPopupModal"></popup-modal>
    
    <view class='tn-tabbar-height'></view>
    
	</view>
</template>

<script>
  import PopupModal from '@/components/popup/popup.vue'
  import indexList from '../../libs/index.list.js'
  const letterArr = indexList.list.map(val => {
    return val.letter
  })
	export default {
    components: { PopupModal },
    name: 'Partner',
		data() {
			return {
        showPopupModal: false,
        
				current: 0,
				scrollList: [
				  {name: '联系人'},
				  {name: '组织架构'}
				],
        
        // 滚动的距离
        scrollTop: 0,
        // 索引列表
        indexList: letterArr,
        list: indexList.list
			}
		},
		onLoad() {

		},
		methods: {
      // 跳转
      tn(e) {
        uni.navigateTo({
          url: e,
        });
      },
      // tab选项卡切换
      tabChange(index) {
        this.current = index
      },
      // 选择索引列表索引事件
      indexListKeysSelect(event) {
        this.$emit('key-select', event.scrollTop)
      },
      // 更新页面的滚动距离
      _updateScrollTopValue(top) {
        this.scrollTop = top
      },
      
      // 打开信息弹框
      openPopupModal() {
        this.showPopupModal = true
      },
		}
	}
</script>

<style lang="scss" scoped>
	.template-partner{
	  max-height: 100vh;
    max-width: 640px;
    margin: 0 auto;
	}
  
  /* 自定义导航栏内容 start */
  .custom-nav {
    height: 100%;
    max-width: 640px;
    
    &__back {
      margin: auto 5rpx;
      font-size: 45rpx;
      margin-right: 10rpx;
      margin-left: 30rpx;
      flex-basis: 5%;
    }
  }
  /* 自定义导航栏内容 end */
  
  /* 新增OA色系，自行调用，或者拿色值去用，多种方式*/
  .oa-black{
    color: #1D2541;
  }
  .oa-blue{
    color: #4B98FE;
  }
  .oa-orangeyellow{
    color: #FFAC00;
  }
  .oa-green{
    color: #00D05E;
  }
  .oa-orange{
    color: #FE871B;
  }
  .oa-cyan{
    color: #00C8B0;
  }
  .oa-indigo{
    color: #00B9FE;
  }
  .oa-orangered{
    color: #FB6A67;
  }
  .oa-purple{
    color: #957BFE;
  }
  
  /* 底部安全边距 start*/
  .tn-tabbar-height {
  	min-height: 120rpx;
  	height: calc(140rpx + env(safe-area-inset-bottom));
  	height: calc(140rpx + constant(safe-area-inset-bottom));
  }
  
  .partner-fixed{
    max-width: 640px;
    position: fixed;
    background-color: rgba(255,255,255,1);
    top: 0;
    width: 100%;
    transition: all 0.25s ease-out;
    z-index: 100;
  }

  
  .index-list-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    overflow: hidden;
    color: $tn-font-color;
    font-size: 28rpx;
    
    &__image {
      width: 100rpx;
      height: 100rpx;
      margin: 8rpx 8rpx;
      margin-right: 10rpx;
    }
  }
  
  /* OA色系*/
  .oa-black{
    color: #1D2541;
  }

  
  /* 信息展示 start */
  .tn-info {
    z-index: 9999;
    
    &__container {
      margin-top: 0rpx;
    }
    
    &__item {
      width: 48%;
      margin: 15rpx 0rpx;
      padding: 36rpx 30rpx;
      border-radius: 15rpx;
      
  
        position: relative;
        z-index: 1;
        
        &::after {
          content: " ";
          position: absolute;
          z-index: -1;
          width: 100%;
          height: 100%;
          left: 0;
          bottom: 0;
          border-radius: inherit;
          opacity: 1;
          transform: scale(1, 1);
          background-size: 100% 100%;
          background-image: url(https://resource.tuniaokj.com/images/cool_bg_image/6.png);
        }
      
      &__left {
        
        &--icon {
          width: 80rpx;
          height: 80rpx;
          border-radius: 50%;
          font-size: 40rpx;
          margin-right: 20rpx;
          position: relative;
          z-index: 1;
          
          &::after {
            content: " ";
            position: absolute;
            z-index: -1;
            width: 100%;
            height: 100%;
            left: 0;
            bottom: 0;
            border-radius: inherit;
            opacity: 1;
            transform: scale(1, 1);
            background-size: 100% 100%;
            background-image: url(https://resource.tuniaokj.com/images/cool_bg_image/icon_bg5.png);
          }
        }
        
        &__content {
          // font-size: 32rpx;
          
          &--data {
            margin-top: 5rpx;
          }
        }
      }
      
      &__right {
        &--icon {
          position: absolute;
          right: 0rpx;
          bottom: 0rpx;
          font-size: 60rpx;
          width: 98rpx;
          height: 78rpx;
          text-align: center;
          line-height: 80rpx;
          border-radius: 20rpx 0 20rpx 6rpx;
          // opacity: 0.15;
          
          &::after {
            content: " ";
            position: absolute;
            z-index: -1;
            right: 16rpx;
            bottom: 0rpx;
            width: 108rpx;
            height: 56rpx;
            background-color: inherit;
            border-radius: inherit;
            opacity: 1;
            border-radius: 20rpx 0 20rpx 0;
            opacity: 0.55;
          }
        }
      }
    }
  }
  /* 信息展示 end */
  
  
  /* 图标容器15 start */
  .icon15 {
    &__item {
      width: 30%;
      background-color: #FFFFFF;
      padding: 30rpx;
      margin: 20rpx 10rpx;
      transform: scale(1);
      transition: transform 0.3s linear;
      transform-origin: center center;
      
      &--icon {
        width: 90rpx;
        height: 90rpx;
        font-size: 60rpx;
        border-radius: 20rpx;
        position: relative;
        z-index: 1;
        
        &::after {
          content: " ";
          position: absolute;
          z-index: -1;
          width: 100%;
          height: 100%;
          left: 0;
          bottom: 0;
          border-radius: inherit;
          opacity: 1;
          transform: scale(1, 1);
          background-size: 100% 100%;
  
            
        }
      }
    }
  }
  
  /* 用户头像 start */
  .logo-image {
    width: 90rpx;
    height: 90rpx;
    position: relative;
  }
  
  .logo-pic {
    background-size: cover;
    background-repeat: no-repeat;
    // background-attachment:fixed;
    background-position: center;
    // border: 1rpx solid rgba(255,255,255,0.05);
    // box-shadow: 0rpx 0rpx 80rpx 0rpx rgba(0, 0, 0, 0.15);
    border-radius: 20rpx;
    overflow: hidden;
    // background-color: #FFFFFF;
  }
  
</style>
